<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {

            display: flex;
            justify-content: center;
            align-items: center;

            height: 800px;


        }

        h2 {

            display: flex;
            justify-content: center;
            align-items: center;

        }

        div {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

        }

        table {

           
            border-collapse: collapse;
           
            border: solid 1px ;
            
        }

        td {

        
            width: 100px;

            height: 50px;

        }
    </style>

</head>

<body>



    <div id="app">

        <h2>SHIXIN_打地鼠概念版</h2>

        <table>

            <tr v-for="(i,i_index) in todo">

                <td v-for="(j,j_index) in i" @click="arr(i_index,j_index)">


                    {{j.data}}


                </td>


            </tr>

        </table>

        <div style="height: 400px;">

            <h3 style="height: 25px;"> <span>{{text}}</span> </h3>

            <div style="height: 40px;">

                <button v-if="Go" @click="go"> 开始</button>



                <button v-if="Over" @click="End"> 认输</button>


            </div>


            <h5 style="height: 25px;"><span v-show="tiShi"> {{tishi}}</span> </h5>

            <h4><span> 得分： {{score}} 目标分数：50</span><br>


                <h5>

                    使用鼠标点击来打地鼠或者使用数字键盘也可哦

                </h5>

            </h4>



            <span>
                抵制不良游戏，拒绝盗版游戏。<br>
                注意自我保护，谨防受骗上当。<br>
                适度游戏益脑，沉迷游戏伤身。<br>
                合理安排时间，享受健康生活。

            </span>
        </div>


    </div>

    <script src="../Vue.js/vue.js"></script>

    <script>

        let arr1 = [[{ data: '' }, { data: '' }, { data: '' }], [{ data: '' }, { data: '' }, { data: '' }], [{ data: '' }, { data: '' }, { data: '' }]]

        let X

        let Y

        let dd = 0

        let cc = 0

        let K = 0

        let setInter

        var app = new Vue({

            el: "#app",
            data: {

                isOk: true,

                todo: arr1,

                text: '',

                score: 0,

                Go: true,

                Over: false,

                tishi: "点击或按'K'开始",

                tiShi: false,

            },
            methods: {
                go() {

                    K = 1

                    this.Go = false

                    this.tishi = ""

                    this.text = "准备好了吗？"

                    setTimeout(() => {

                        this.text = "我们开始了喔"

                        setTimeout(() => {

                            this.text = ""

                            this.tishi = "点击或按空格结束"

                            this.arr3()

                            this.Over = true

                        }, 800)

                    }, 800)




                },

                arr(i, j) {

                    if (i == X && j == Y && cc == 0) {

                        this.score++

                        
                    }

                    cc = 1

                },
                End() {


                    window.clearInterval(setInter)

                    arr1.forEach(item => {

                        item.forEach(item2 => {

                            item2.data = ""

                        })

                    })

                    this.text = "菜"
                    this.score = 0
                    this.Go = true
                    this.Over = false
                    this.tishi = "点击或按'K'开始"
                    K = 0

                },
                arr3() {

                    let time = 650

                    this.text = "先给你上个小菜"

                    setTime()


                    function setTime() {

                        setInter = window.setInterval(() => {

                            arr1.forEach(item => {

                                item.forEach(item2 => {

                                    item2.data = ""

                                })

                            })


                            let Ran = Random()

                            arr1[Ran[0]][Ran[1]].data = "来打我呀"

                            this.todo = arr1

                            cc = 0

                            if (app.score == 50) {

                                app.End()

                                app.text = "你真厉害"

                            } else if (app.score % 10 == 0 && app.score != dd) {

                                window.clearInterval(setInter)

                                app.text = "要认真了哦"

                                time -= 120

                                dd = app.score

                                setTime()
                            }


                        }, time);


                    }



                }


            }


        })


        function Random() {


            let i = parseInt(Math.random() * 3)

            let j = parseInt(Math.random() * 3)

            if (X == i && j == Y) {

                X = X == 0 ? X + 1 : X - 1

                Y = Y == 0 ? Y + 1 : Y - 1

            } else {

                X = i

                Y = j

            }

            return [X, Y]

        }


        setInterval(() => {


            app.tiShi = !app.tiShi


        }, 500);

        document.addEventListener("keydown", function (e) {

            if (cc==0) {
                    
            if (e.keyCode == 97) {

app.arr(2, 0)

} else if (e.keyCode == 98) {

app.arr(2, 1)

} else if (e.keyCode == 99) {

app.arr(2, 2)

} else if (e.keyCode == 100) {

app.arr(1, 0)

} else if (e.keyCode == 101) {

app.arr(1, 1)

} else if (e.keyCode == 102) {

app.arr(1, 2)

} else if (e.keyCode == 103) {

app.arr(0, 0)

} else if (e.keyCode == 104) {

app.arr(0, 1)

} else if (e.keyCode == 105) {

app.arr(0, 2)

} else if (e.keyCode == 75 && K == 0) {

app.go()

} else if (e.keyCode == 32) {

app.End()

}


            } 



        })

    </script>

</body>

</html>